import React from 'react'
// prettier-ignore
import {
  Text,
  View,
  Image,
  StyleSheet,
} from 'react-native'

import RxColors from '../../../../commons/styles/RxColors'
// import RxButton from '../../../../components/button/RxButton'

const HomeNumCard = props => {
  const {style} = props
  return (
    <View style={[styles.container, style]}>
      <View style={styles.slider}>
        <View>
          <Image />
          <Text style={[styles.text]}>跑图次数</Text>
        </View>
        <View style={styles.num}>
          <Text style={[styles.text, styles.count]}>0</Text>
          <Text style={[styles.text, styles.suffix]}>次</Text>
        </View>
      </View>
      <View style={styles.slider}>
        <View>
          <Image />
          <Text style={[styles.text]}>今日玉璧</Text>
        </View>
        <View>
          <Text style={[styles.text, styles.count]}>0</Text>
        </View>
      </View>
    </View>
  )
}

export default HomeNumCard

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: 100,
  },
  slider: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  num: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'baseline',
  },
  text: {
    fontSize: 12,
    color: RxColors.White,
  },
  count: {
    fontSize: 30,
    fontWeight: 'bold',
  },
  suffix: {
    marginLeft: 2,
    fontSize: 14,
    fontWeight: 'bold',
  },
})
